import {
  Component,
  OnInit,
  Injector,
  ChangeDetectorRef,
  ViewChild,
  AfterViewInit,
  ElementRef,
} from '@angular/core';
import { ListBase } from 'app/modules/base/list-base';
import { Zone, ZoneService } from '../../services/zone.service';
import { AddComponent } from '../add/add.component';
import { MySelection } from 'app/modules/base/selection';
import { map, tap } from 'rxjs/operators';
import { LoginService } from 'app/modules/login/services/login.service';
import { AutoNodeConst } from 'app/modules/admin-manager/services/admin.service';
import { HttpClient } from '@angular/common/http';

import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';

@Component({
  selector: 'm-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
})
export class ListComponent extends ListBase implements OnInit, AfterViewInit {
  @ViewChild('roll') roll: ElementRef;
  @ViewChild('keyword') keyword: ElementRef;
  searchKey;
  tree;
  step = 1;
  searchData: any;
  page = 0;
  total = 100;
  navigationSubscription;
  constructor(
    private injector: Injector,
    private loginService: LoginService,
    public http: HttpClient,
    public cdr: ChangeDetectorRef,
    public route: ActivatedRoute,
    public data: ZoneService,
        private ref: ChangeDetectorRef,

  ) {
    super(injector);
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.step = 1;
        this.searchKey = "";
        try{
          this.keyword.nativeElement.value = ""
        }catch(e){

        }
        
        
        this.cdr.markForCheck();   
        this.cdr.detectChanges();  
      }
    });

  }

  ngAfterViewInit() {
    this.route.queryParams.subscribe((res) => {
      this.page = res.page;
      this.onSearchKey();
    });
  }
  // result$ = this.getData<Zone[]>('tree').pipe(
  // 	map(rootTree => (rootTree[0].id === 0 ? rootTree[0].children : rootTree)),
  // );
  result$ = this.getData<Zone[]>('tree');
  canCreateZone$ = this.loginService.User$.pipe(
    map((user) => user.auth_nodes.includes(AutoNodeConst.CreateZone)),
  );
  ngOnInit() {
    this.tree = this.result$.source['_value'].tree.message.slice(0,50);
    console.log(this.tree);
  }

  // async create(tree: Zone[]) {
  // 	try {
  // 		const add = this.dialog.open(AddComponent, { width: '40rem' });
  // 		console.log(add)
  // 		add.componentInstance.value = this.route.snapshot.data.tree;
  // 		const result = await add.afterClosed().toPromise();
  // 		if (result) {
  // 			this.reload();   
  // 		}
  // 	} catch {}
  // }

//搜索出来的树状结构
  onSearchKey(e?) {
    let page = this.page == null ? 0 : this.page == 1 ? 0 : this.page - 1;
    this.http
      .get('api/admin/batch_areas', {
        params: { name: this.keyword.nativeElement.value, limit: '10', offset: `${page * 10}` },
        observe: 'response',
      })
      .pipe(tap((res) => {}))
      .subscribe((res: any) => {
        this.total = res.headers.get('total_row_count');
        this.searchData = res.body.message;
        if (e) {
          this.step = 2;
        }
        this.cdr.detectChanges();
      });
  }
   //点击分层
  srocllTop(e) {
    this.roll.nativeElement.scrollTop = e;
  }
  searchTree;
  selectItem(e) {
    this.searchTree = [e];

    this.step = 3;

    this.cdr.detectChanges();
  }
}
